//小橙点图
var pointOutChart = echarts.init(document.getElementById("pointOut"));
var appPointOut = {};
var dataSize;
option = null;
appPointOut.title = '北京公交路线 - 线特效';
//请求订单数
$.ajax({
    type : "POST",
    async : false,
    url : "PointOutServletReadSize",
    data:{},
    dataType:"json",
    success : function (result){
        dataSize = Number(result);
    }
});
//请求轨迹数据
$.ajax({
    type : "POST",
    async : false,
    url : "PointOutServlet",
    data:{},
    dataType:"json",
    success : function (result) {
        var data = [];
        var pointList = [];
        for (var j = 1; j <= dataSize ; j++) {
            for (var i = 0; i < result.length; i++){
                if (result[i].id === j) {
                    pointList.push(result[i].longitude);
                    pointList.push(result[i].latitude);
                }
            }
            data.push(pointList);
            pointList = [];
        }
        // var data = [[1164383,401471,-11,-13,1,-49,-26,-14,99,-170,4,-36,87,-2,16,-141,-2,-15,-47,-6,-168,-9,-2,22,-74,-4,-138,10,12,-152,9,-55,-17,-111,13,-176,-20,-38,1,-57,31,-54,28,-85,-5,-126,-13,-62,1,-34,-84,1,-3,-218,15,6,78,2,4,-52,70,1,7,-142,99,2,21,-5,229,-150,16,-23,0,-180,168,1,-4,-257,82,0,33,-22,78,20],
        //     [1164311,399594,8,1,33,0,56,1,29,3,30,27,8,-5,21,-14,3,-2,1,-1,-4,-3,-13,-13,-21,-19,-9,-9,-16,-9,-93,-6,8,50,-100,-1,-1,0,-171,-3,-1,0,0,-1,0,-8,0,-15,1,-8,0,-28,0,-4,1,-11,0,-19,0,-12,2,-22,1,-26,1,-25,0,-25,1,-24,0,-4,2,-25,0,-1,0,-7,1,-28,2,-25,17,-30,0,-1,0,-2,2,-55,-44,-1,0,-32,1,0,48,3,11,0,12,-34,0,-7,-24,-9,0,-12,1,-12,0,-1,7,0,8,0,8,0,41,1,1,-10,0,-4,1,-5,0,-6,0,-3,2,-21,1,-12,0,-8,0,-2,2,0,31,-6,6,0,51,2,0,1,-70,0,7,13,7,5,30,22,1,1],
        //     [1163471,399601,-3,5,-14,65,22,3,17,0,5,0,2,0,59,1,12,0,8,0,2,0,33,0,88,1,1,0,12,0,11,1,6,0,23,1,12,0,10,0,24,-4,-3,-24,-1,-12,-6,-52,5,0,2,21,2,21,148,3,1,0,72,2,57,-13,1,0,104,0,67,2,1,-28,0,-1,1,0,67,2,1,-9,4,-40,-1,-48,-19,1,-18,-1,-28,0,0,-4,33,0,22,0,10,-4,11,-27,0,-16,1,-14,-3,-20,3,-6,6,0,5,2,18,1,4,0]];
        console.log(data);
        var hStep = 300 / (data.length - 1);
        var busLines = [].concat.apply([], data.map(function (busLine, idx) {
            var prevPt;
            var points = [];
            for (var i = 0; i < busLine.length; i += 2) {
                var pt = [busLine[i], busLine[i + 1]];
                if (i > 0) {
                    pt = [
                        prevPt[0] + pt[0],
                        prevPt[1] + pt[1]
                    ];
                }
                prevPt = pt;
                points.push([pt[0] / 1e4, pt[1] / 1e4]);

            }
            return {
                coords: points,
                lineStyle: {
                    normal: {
                        color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                    }
                }
            };
        }));
        //   console.log(busLines);
        pointOutChart.setOption(option = {
            bmap: {
                center: [104.08, 30.7005],
                zoom: 14,
                roam: true,
                mapStyle: {
                    'styleJson': [
                        {
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#031628'
                            }
                        },
                        {
                            'featureType': 'land',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000102'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#0b3d51'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#08304b'
                            }
                        },
                        {
                            'featureType': 'subway',
                            'elementType': 'geometry',
                            'stylers': {
                                'lightness': -70
                            }
                        },
                        {
                            'featureType': 'building',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'all',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#857f7f'
                            }
                        },
                        {
                            'featureType': 'all',
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'building',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#022338'
                            }
                        },
                        {
                            'featureType': 'green',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#062032'
                            }
                        },
                        {
                            'featureType': 'boundary',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#465b6c'
                            }
                        },
                        {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#022338'
                            }
                        },
                        {
                            'featureType': 'label',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }
                    ]
                    /*'styleJson': [
                        {
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'land',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000102'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off',
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#0b3d51'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'subway',
                            'elementType': 'geometry',
                            'stylers': {
                                'lightness': -100
                            }
                        },
                        {
                            'featureType': 'building',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'all',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'all',
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'building',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'green',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'boundary',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'label',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }
                    ]*/
                }
            },
            series: [{
                type: 'lines',
                coordinateSystem: 'bmap',
                polyline: true,
                data: busLines,
                silent: true,
                lineStyle: {
                    normal: {
                        color: '#FFCC00',
                        // color: 'rgb(200, 35, 45)',
                        opacity: 0,//轨迹透明度
                        width: 5  //轨迹粗细
                    }
                },
                progressiveThreshold: 500,
                /*
                * 启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。
                * */
                progressive: 200
                /*
                渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。
                在图中有数千到几千万图形元素的时候，一下子把图形绘制出来，或者交互重绘的时候可能会造成界面的卡顿甚至假死。
                ECharts 4 开始全流程支持渐进渲染（progressive rendering），
                渲染的时候会把创建好的图形分到数帧中渲染，每一帧渲染只渲染指定数量的图形。
                该配置项就是用于配置该系列每一帧渲染的图形数，可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。
                比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢，这个数字就可以设置小一点，而线宽小于等于 1 的 polyline 绘制非常快，该配置项就可以相对调得比较大。
                 */
            }, {
                type: 'lines',
                coordinateSystem: 'bmap',
                polyline: true,
                data: busLines,
                lineStyle: {
                    normal: {
                        width: 0
                    }
                },
                effect: {
                    constantSpeed: 100, //调速
                    show: true,
                    trailLength: 0.05, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
                    //trailLength: 1 数据过多时，放大缩小会严重拖影
                    symbolSize: 1.5,
                    /*large : 是否启用大规模线图的优化，在数据图形特别多的时候（>=5k）可以开启。
                    开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。
                      缺点：优化后不能自定义设置单个数据项的样式，不能启用 effect。*/
                },
                zlevel: 1
            }]
        });
        ////////////////////////////////////////////////////////////////////////////////////////////////
    }
});

if (option && typeof option === "object") {
    pointOutChart.setOption(option, true);
}